<!-- 使用示例
<jp-filter-list :list="deptList" @select="onSelectDept"></jp-filter-list>

onSelectDept(item) {
	
} -->

<template>
	<view class="jp-flex-column jp-filter-list">
		<view class="jp-flex-row jp-cross-center select-title" @click="onClick">
			<jp-ellipsis-text :style="'color:' +titleColor+ ';'" lines="1">{{selectName || ''}}</jp-ellipsis-text>
			<u-icon v-if="!show" name="arrow-down" :color="titleColor" style="flex-shrink: 0; margin-left: 12rpx;"
				size="32rpx"></u-icon>
			<u-icon v-if="show" name="arrow-up" :color="titleColor" style="flex-shrink: 0; margin-left: 12rpx;"
				size="32rpx"></u-icon>
		</view>
		<view v-show="show" class="content" @click="onClick">
			<scroll-view :scroll-y="true">
				<view class="item-content jp-flex-column">
					<text class="item" v-for="(item,index) in list" :key="index"
						@click.stop="onSelect(item,index)">{{item[keyName]}}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'jp-filter-list',
		props: {
			list: {
				type: Array,
				default: () => [],
			},
			keyName: {
				type: String,
				default: 'name',
			},
			defaultSelectName: {
				type: String,
				default: '全部科室',
			}
		},
		data() {
			return {
				show: false,
				selectName: null,
				titleColor: '#4F4F4F'
			};
		},
		watch: {
			defaultSelectName: {
				handler(newVal) {
					this.selectName = newVal
				},
				immediate: true
			}
		},
		beforeDestroy() {
			// #ifdef H5
			document.body.style.overflow = "auto"
			// #endif
		},
		methods: {
			onClick() {
				this.show = !this.show
				if (this.show == true) {
					// #ifdef H5
					//使用组件时，会发现内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。
					//但由于平台自身原因，除了h5平台外 ，其他平台都不能在在 组件内 禁止滚动穿透，
					//所以在微信小程序、App 平台，页面内需要用户特殊处理一下（<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>）
					//https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html#禁止滚动穿透
					document.body.style.overflow = "hidden" //使得popup下方的父组件不跟随滑动（防止滑动穿透）
					// #endif
					this.$emit('open')
				} else {
					// #ifdef H5
					document.body.style.overflow = "auto"
					// #endif
					this.$emit('close')
				}
			},
			onSelect(item, index) {
				// #ifdef H5
				document.body.style.overflow = "auto"
				// #endif
				console.log('【jp-filter-list】onSelect=>' + item[this.keyName])
				item.index = index
				this.selectName = item[this.keyName]
				if (this.selectName == this.defaultSelectName) {
					this.titleColor = '#4F4F4F'
				} else {
					this.titleColor = 'var(--uni-color-primary)'
				}
				this.$emit('select', item)
				this.onClick()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.jp-filter-list {
		position: relative;
		z-index: 10;

		.select-title {
			height: 80rpx;
			line-height: 80rpx;
			width: 100%;
			padding: 0 32rpx;
			font-size: 32rpx;
			border-bottom: 0.5rpx #00000020 solid;
			color: $text-main;
			background-color: white;
		}

		.content {
			position: absolute;
			top: 80rpx;
			left: 0;
			right: 0;
			bottom: 0;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.3);

			.item-content {
				background-color: white;
				max-height: 60vh;
				overflow-y: scroll;

				.item {
					padding: 24rpx 32rpx;
					font-size: 32rpx;
					color: $text-main;
					background-color: white;
					border-bottom: 0.5rpx #00000020 solid;
				}
			}
		}
	}
</style>